<template>
    <div>
      <div class="search">
          <div class="input">
              <p><label>渠道编码：</label><el-input placeholder="请输入ID" label="条件"></el-input></p>
              <p><label>名称：</label><el-input placeholder="请输入编码" label="条件"></el-input></p>
              <p><label>上级渠道：</label><el-input placeholder="请输入编码" label="条件"></el-input></p>
              <p><label>创建时间：</label><el-input placeholder="请输入编码" label="条件"></el-input></p>
              <p><label>更新时间：</label><el-input placeholder="请输入编码" label="条件"></el-input></p>
              <!-- <label>：</label><el-input v-model="condition" placeholder="请输入名称" label="条件"></el-input> -->
              <p><el-button type="primary" class="se" style="margin-left:10px;">搜索</el-button></p>
          </div>
      </div>
      <div class="add">
         <el-button type="primary" @click="dialogs">新增</el-button>
      </div>
      <tableVue :list="list" :state="false">
          <slot>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row)">详情
                  </el-button>
                  <el-button
                    size="mini"
                    type="danger"
                    class="del"
                    @click="handleEdit(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
          </slot>
      </tableVue>
      <dialogVue title="新增职位" :dialog="dialog" @close="changeData">
          <slot>
            <p><label>渠道名称：</label><input type="text" placeholder="请输入机构编码"></p>
            <p><label>渠道编码：</label><input type="text" placeholder="请输入名称"></p>
            <p><label>渠道描述：</label><input type="text" placeholder="请输入名称"></p>
            <p><label>上级渠道：</label><input type="text" placeholder="请输入名称"></p>
          </slot>
      </dialogVue>
    </div>
</template>

<script>
  import Data from './ChannelData.js'
  import dialogVue from '@/components/dialog.vue'
  import tableVue from '@/components/alltable.vue'
  export default {
    components : {
      tableVue,
      dialogVue
    },
     data () {
       return JSON.parse(JSON.stringify(Data))
     },
     methods : {
       dialogs() {
         this.dialog = true;
       },
       changeData (val) {
           this.dialog = val
       },
       handleEdit(idx,item){
         console.log(idx)
         console.log(item.id)
       }
     }
  }
  </script>

<style lang="css">
.search {
  width: 100%;
  background-color: #fff;
  padding:20px;
  box-sizing: border-box;
  margin-top: 10px;
}
.input {
  /* width: 300px; */
  display: flex;
  flex-wrap: wrap;
}
.input p {
  margin-top: 10px;
}
label {
  line-height: 40px;
  color: #333;
  margin: 0 10px;
}
.el-input {
  width:200px;
  height:20px;
}
.add {
  margin-top: 10px;
  padding-left: 14px;
}
.se {
  margin-left: 20px;
}
</style>
